<template>
  <div class="left">
    <div class="leftbox">
      <el-col :span="24">
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="rgb(229 183 186)"
          router
        >
          <el-menu-item
            v-for="item in menuInfo"
            :index="item.path"
            :key="item.path"
            :disabled="!isLogin"
          >
            <i :class="item.icon"></i>
            <p class="title" slot="title">{{ item.title }}</p>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
  </div>
</template>

<script>
export default {
  name: "CatcoffeeLeft",
  data() {
    return {
      menuInfo: [
        {
          title: "产品管理",
          icon: "el-icon-s-claim",
          path: "/product",
        },
        {
          title: "分类管理",
          icon: "el-icon-s-claim",
          path: "/classification",
        },
        {
          title: "订单管理",
          icon: "el-icon-s-management",
          path: "/order",
        },
        {
          title: "用户管理",
          icon: "el-icon-s-custom",
          path: "/user",
        },
        {
          title: "员工管理",
          icon: "el-icon-s-custom",
          path: "/staff",
        },
        {
          title: "可视化",
          icon: "el-icon-odometer",
          path: "/visualization",
        },
      ],
    };
  },
  computed: {
    isLogin(){
      return this.$store.state.isLogin;
    }
  },
  methods: {
    
  },
};
</script>
<style scoped>
.leftbox,
.left {
  height: 70%;
  background-color: #545c64;
  padding: 0;
  box-sizing: border-box;
}
.left {
  padding-top: 20px;
}
.left .title{
  display: inline-block;
  font-size: 16px;
}
/* 去除多余的1px */
.el-menu {
  border-right-width: 0;
  align-items: center;
}
</style>